<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1 onclick="show()">雷达图表测试</h1>
    <div id="main"></div>
</body>
<script>
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '基础雷达图'
        },
        legend: {
            data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
        },
        radar: {
            // shape: 'circle',
            indicator: [
            ]
        },
        series: [{
            name: '预算 vs 开销（Budget vs spending）',
            type: 'radar',
            data: [
            ]
        }]
    };

    option && myChart.setOption(option);
    function show(){
        var url="http://localhost:8080/echarts/radar";
        $.get(url).done(function (data) {
            console.log(data);
            myChart.setOption({
                radar: {
                    // shape: 'circle',
                    indicator: [
                        {name:data.title[0],max:data.max[0]},
                        {name:data.title[1],max:data.max[1]},
                        {name:data.title[2],max:data.max[2]},
                        {name:data.title[3],max:data.max[3]},
                        {name:data.title[4],max:data.max[4]},
                        {name:data.title[5],max:data.max[5]}
                    ]
                },
                series: [{
                    data: [{
                        value: data.data
                    }
                    ]
                }]
            });
        });
    }
</script>
</html>